<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        #head1111 {
            width: 100%;
            height: 80px;
        }

        #name1111 {
            width: 250px;
            height: 96px;
        }

        #a1111 {
            text-decoration: none;
        }

        p {
            font-size: 40px;
            color: rgb(155, 71, 82);
            font-weight: bolder;
            text-align: center;
            margin: 0 0;
            position: relative;
            top: 15px;
            left: 20px;
        }



        .ph {
            width: 70px;
            height: 70px;
            position: absolute;
        }

        #logo1111 {
            position: absolute;
            top: 5px;
            left: 300px;
            width: 100px;
            height: 100px;
            clear: both;

        }

        #body1111 {
            width: 100%;
            height: 600px;
        }

        #body1111 img {
            width: 100%;
            height: 600px;
            opacity: 0.7;
        }

        #center1111 {
            width: 400px;
            height: 400px;
            background-color: rgba(231, 230, 229, 0.7);
            margin: auto auto;
            position: absolute;
            z-index: 10;
            top: 120px;
            right: 200px;
        }

        #zhuce1 {
            width: 400px;
            height: 400px;
            background-color: rgba(231, 230, 229, 0.7);
            margin: auto auto;
            position: absolute;
            z-index: 10;
            top: 120px;
            right: 200px;
            display: none;
        }

        #text1111 {

            margin-top: 100px;
            margin-left: 70px;
        }

        #text1111 input {
            width: 200px;
            height: 30px;
        }

        #text2222 {

            margin-top: 30px;
            margin-left: 70px;
        }

        #text2222 input {
            width: 200px;
            height: 30px;
        }



        #text3333 input {
            width: 100px;
            height: 15px;
        }

        #text4444 {

            margin-top: 30px;
            margin-left: 140px;
        }

        #text4444 input {
            width: 120px;
            height: 30px;
        }

        #zhuce1111 {
            font-size: 15px;
            color: rgb(245, 196, 106);
            position: absolute;
            top: 350px;
            left: 220px;

        }

        #denglu1111 {
            font-size: 15px;
            color: rgb(245, 196, 106);
            position: absolute;
            top: 350px;
            left: 160px;

        }

        #text5555 {

            margin-top: 20px;
            margin-left: 250px;
        }

        #text5555 a {
            width: 200px;
            height: 30px;
            text-decoration: none;
        }

        #text555 {
            margin-top: 20px;
            margin-left: 250px;
        }

        #yan1111 {
            width: 70px;
            height: 30px;
            margin-top: 13px;
            margin-left: -210px;
        }

        #text123 {
            width: 200px;
            height: 30px;
            margin-left: 10px;
        }

        #rem11 {
            width: 400px;
            height: 400px;
            background-color: rgba(170, 135, 99, 0.9);
            margin: auto auto;
            position: absolute;
            z-index: 10;
            top: 120px;
            left: 450px;
            display: none;
        }

        #rem11 p {
            font-size: 30px;
            color: brown;
            text-align: center;
            margin-left: -30px;
        }

        #dd1 input {
            width: 200px;
            height: 30px;
        }

        #dd1 {
            margin-top: 50px;
            margin-left: 20px;
        }

        #dd2 {
            margin-top: 10px;
            margin-left: 250px;
        }

        #dd3 {
            margin-top: 20px;
            margin-left: 55px;
        }

        #dd3 input {
            width: 200px;
            height: 30px;
        }

        #dd4 input {
            width: 200px;
            height: 30px;
        }

        #dd4 {
            margin-top: 50px;
            margin-left: 110px;
        }

        footer {
            width: 100%;
            height: 100px;
            background: #eee;
            margin-top: 20px;
        }

        footer ul {
            width: 600px;
            height: 50px;
            margin: 0 auto;
        }

        footer ul li {
            width: 120px;
            height: 50px;
            line-height: 50px;
            float: left;
            text-align: center
        }

        #footer1 #img2 {
            margin-left: 50px;
            margin-top: 10px;
            width: 30px;
            height: 30px;
            position: relative;
            bottom: 15px;
            text-align: center
        }

        #footer1 #span2 {
            position: relative;
            top: -25px;
            margin-right: 50px;
            font-size: 20px;
            color: #000;
            
        }

        #footer1 p {
            width: 100%;
            height: 30px;
            text-align: center
        }

        #footer1 {
            margin-top: 20px;
            width: 500px;
            height: 30px;
            margin: 0 auto;
        }

        #p123 {
            margin-top: 20px;
            font-size: 20px;
            color: #000;
            text-align: center;
        }
    </style>
    <script>

        window.onload = function () {
            //onsubmit事件中，返回false那么不会提
            document.forms[0].onsubmit = function () {
                //1.用户名不能有数字
                //2.密码必须6位
                //3.用户名、密码不能为空
                var txtName = document.getElementsByTagName('input')[0].value
                var txtPassword = document.getElementsByTagName('input')[1].value
                if (txtPassword.length != 6 || txtName.length != 11) {
                    alert("输入错误！！！")
                }
                if (txtPassword.length != 6) {
                    alert("密码必须一定是6位！")

                }
                if (txtName.length != 11) {
                    alert("手机号是11位哦！")
                }
                for (var i = 0; i < txtName.length; i++) {
                    if (isNaN(txtName[i])) {
                        alert('手机号只能是数字哦！')
                        return false;
                    }
                }
                alert('登录成功')
                window.location.href = "index.html"
            }
            document.getElementsByTagName('input')[0].onfocus = function () {
                if (this.value == "请输入11位手机号") {
                    this.value = ''     //清除文本框的内容
                }

            }
            //文本框的失去焦点事件
            document.getElementsByTagName('input')[0].onblur = function () {
                if (this.value == "") {
                    this.value = '请输入11位手机号'
                }
            }
            document.getElementById('zhuce1111').onclick = function () {
                document.getElementById('center1111').style.display = 'none';
                document.getElementById('zhuce1').style.display = 'block';

            }
            document.getElementById('submit').onclick = function () {
                document.getElementById('center1111').style.display = 'block';
                document.getElementById('zhuce1').style.display = 'none';

            }
            document.getElementById('submit1').onclick = function () {
                document.getElementById('zhuce1').style.display = 'none';
                document.getElementById('rem11').style.display = 'none';

            }
            document.getElementById('rem111').onclick = function () {
                document.getElementById('rem11').style.display = 'block';
            }
        }

    </script>
</head>

<body>
    <div id="head1111">
        <div id="name1111">
            <p> here , 在这里</p>
        </div>
        <div id="logo1111">
            <img src="images/logo1.png" alt="" class="ph">
        </div>
    </div>
    <div id="body1111">
        <img src="images/sweet3.jpg">
        <div id="center1111">
            <form action="#">

                <div id="text1111">用户：<input type="text" value="请输入11位手机号"></div>
                <div id="text2222">密码：<input type="password"></div>

                <div id="text5555"><a href="#" id="rem111">忘记密码？</a></div>
                <div id="text4444"><a href="#"><input type="submit" value="登录" id="submit"></a></div>
                <p id="zhuce1111"> 注册</p>
                <p id="denglu1111">登录</p>
            </form>
        </div>
        <div id="zhuce1">
            <form action="#">

                <div id="text1111">用户：<input type="text" value="请输入11位手机号"></div>
                <div id="text2222">密码：<input type="password"></div>

                <div id="text555"><input type="submit" value="发送验证码" id="yan1111"><input type="text" id="text123"></div>
                <div id="text4444"><a href=""><input type="submit" value="注册" id="submit"></a></div>
                <p id="zhuce1111"> <a href="">注册</a></p>
                <p id="denglu1111"><a href="">登录</a></p>
            </form>
        </div>
        <div id="rem11">
            <p>找回密码</p>
            <div id="dd1">请输入手机号:<input type="text" value="请输入11位手机号"></div>
            <div id="dd2"><input type="submit" value="发送验证码" id="yan1111"><input type="text" id="text123"></div>
            <div id="dd3">新密码：<input type="password"></div>
            <div id="dd4"><input type="submit" value="保存" id="submit1"></div>
        </div>
        <footer>
            <!-- <ul>
                <li><a href="">首页</a></li>
                <li><a href="">优惠活动</a></li>
                <li><a href="">在线订餐</a></li>
                <li><a href="">新闻资讯</a></li>
                <li><a href="">关于我们</a></li>
            </ul> -->
            <div id="footer1">
                <p><img id="img2" src="images/Iphone.png" alt=""><span id="span2">150xxxxxx2014</span></p>
            </div>
            <p id="p123">互联网出版许可证编号新出网证（沪）字 7777777号</p>

        </footer>
</body>

</html>